import React, { useState, useEffect} from "react";
import styles from "./index.less";
import {Table, message, Button} from "antd";
import request from "umi-request";
import router from 'umi/router';

export default () => {

  const [data, setData] = useState(undefined);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    const item = getData();
    item.then(value=>{
      console.log(value)
      setData(value);
    })
  },[]);

   const getData = async () => {
     setLoading(true)
      const hide = message.loading('正在查询');
      if (!localStorage.getItem('antd_pro_id')) {
        hide();
        message.error('请先登录');
        router.push('/user/login');
      }
      let result = await request.get('/api/mycourse', {
        params: {
          id: localStorage.getItem('antd_pro_id')
        }
      })
     console.log(result);
     setLoading(false)
     return result.data;
    }

  const remove = (params) => {
    console.log(params);
    const hide = message.loading('正在删除');
    if (!localStorage.getItem('antd_pro_id')) {
      hide();
      message.error('请先登录');
      router.push('/user/login');
    }
    request.delete('/api/mycourse', {
      params: {
        id: localStorage.getItem('antd_pro_id'),
        course_id: params.key
      }
    }).then((response) => {
      console.log(response);
      hide();
      if (response.code == 200) {
        const item = getData();
        item.then(value=>{
          console.log(value)
          setData(value);
        })
        message.success('删除成功');
      } else {
        message.error('删除失败');
      }
    })
  }

  const columns = [
    {
      title: "教室名",
      dataIndex: "classroom_name",
      width: "20%"
    },
    {
      title: "课程名",
      dataIndex: "course_name",
      width: "20%"
    },
    {
      title: "人数",
      dataIndex: "people_num"
    },
    {
      title: "系部名",
      dataIndex: "department_name"
    },
    {
      title: "上课时间",
      dataIndex: "time"
    },
    {
      title: '教师',
      dataIndex: 'teacher_name',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (text, record) =>
        <>
          <Button type="danger" onClick={() => remove(record)}>取消</Button>
        </>
    },
  ];
    return (
      <Table
        columns={columns}
        rowKey={record => record.key}
        dataSource={data}
        //pagination={this.state.pagination}
        loading={loading}
        //onChange={this.handleTableChange}
      />
    );

}
//
// export default () => (
//   <div className={styles.container}>
//     <div id="components-table-demo-ajax">
//       <App/>
//     </div>
//   </div>
// );


